import React, {Component} from 'react';
import {Form, Icon, Input, Button, Checkbox} from 'antd';
import {connect} from 'react-redux';
import actions from '../../store/actions/Login';
import './login.scss';
import 'animate.css';

const FormItem = Form.Item;

class NormalLoginForm extends Component {

  handleSubmit = (e) => {
    e.preventDefault();
    const {history} = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        // axios
        const {userName: username, password} = values;
        this.props.GET_LOGIN(username, password).then(res => {
          // history.push('/');
        }).catch(err => {
          console.log(err);
        });
      } else {
        return false;
      }
    });
  };

  render() {
    const {getFieldDecorator} = this.props.form;
    return (
      <div className='mylogin animated zoomIn'>
        <div className='mylogin__box'>
          <Form onSubmit={this.handleSubmit} className="login-form">

            <FormItem>
              {getFieldDecorator('userName', {
                rules: [{
                  required: true,
                  message: 'Please input your username!'
                }]
              })(
                <Input prefix={<Icon type="user" style={{fontSize: 13}}/>} placeholder="Username"/>
              )}
            </FormItem>

            <FormItem>
              {getFieldDecorator('password', {
                rules: [{
                  required: true,
                  message: 'Please input your Password!'
                }]
              })(
                <Input prefix={<Icon type="lock" style={{fontSize: 13}}/>} type="password" placeholder="Password"/>
              )}
            </FormItem>

            <FormItem>
              <div className='loginSubmit'>
                <Button
                  icon="user"
                  type="primary"
                  htmlType="submit"
                  className="login-form-button"
                >
                  登 录
                </Button>
              </div>
            </FormItem>
          </Form>
        </div>
      </div>
    );
  }

}

const WrappedNormalLoginForm = Form.create()(NormalLoginForm);

const mapStateToProps = state => {
  const {login} = state;
  return {};
};

export default connect(mapStateToProps, actions)(WrappedNormalLoginForm);
